<template>
  <div class="app-container">
    <div class="boardtitle1">
      <img src="@/assets/images/drive1.png" alt="" /><span>车辆入园情况</span>
    </div>
    <div class="board">
      <div class="b-item1" @click="handledsp">
        <img src="@/assets/images/drive1.png" alt="" />
        <div class="driveText">
          <p>今日预约车辆</p>
          <!-- <p>{{ this.dsp }}</p> -->
          <p>{{ dayreservationCount }}</p>
        </div>
      </div>
      <div class="b-item2">
        <img src="@/assets/images/oncall.png" alt="" />
        <div class="driveText">
          <p>今日签到车辆</p>
          <!-- <p>{{ this.yrz }}</p> -->
          <p>{{ qdCount }}</p>
        </div>
      </div>
      <div class="b-item3" @click="handleDistribution">
        <img src="@/assets/images/goto.png" alt="" />
        <div class="driveText">
          <p>今日完成配送车辆</p>
          <!-- <p>{{ this.yrz }}</p> -->
          <p>{{ finishedCount }}</p>
        </div>
      </div>
      <div class="b-item4" @click="handleCancel">
        <img src="@/assets/images/takeNumber.png" alt="" />
        <div class="driveText">
          <p>今日取消车辆</p>
          <!-- <p>{{ this.yrz }}</p> -->
          <p>{{ cancalCount }}</p>
        </div>
      </div>
      <div class="b-item5">
        <img src="@/assets/images/leave.png" alt="" />
        <div class="driveText">
          <p>今日在途车辆</p>
          <!-- <p>{{ this.yrz }}</p> -->
          <p>{{ ztCount }}</p>
        </div>
      </div>
      <div class="b-item6">
        <img src="@/assets/images/leave.png" alt="" />
        <div class="driveText">
          <p>今日预约件数</p>
          <!-- <p>{{ this.yrz }}</p> -->
          <p>{{ ysCount }}</p>
        </div>
      </div>
      <div class="b-item7">
        <img src="@/assets/images/leave.png" alt="" />
        <div class="driveText">
          <p>今日实收件数</p>
          <!-- <p>{{ this.yrz }}</p> -->
          <p>{{ ssCount }}</p>
        </div>
      </div>
    </div>
    <div class="titleBox">
      <div class="boardtitle">
        <img src="@/assets/images/drive1.png" alt="" /><span
          >待审单车辆:
          <div class="textColor">{{ examLength }}</div></span
        >
        <div class="refreshBt">
          <el-button type="success" size="mini" round @click="handlechecklist"
            >刷新</el-button
          >
        </div>
      </div>
      <!-- <div class="boardtitle">
        <img src="@/assets/images/drive1.png" alt="" /><span
          >待分配月台车辆:
          <div class="textColor">{{ AllocaLength }}</div></span
        >
      </div> -->
      <div class="boardtitle">
        <img src="@/assets/images/drive1.png" alt="" /><span
          >挂起车辆:
          <div class="textColor">{{ pendingListlength }}</div></span
        >
      </div>
    </div>
    <div class="distrPlatform">
      <div class="distrPlatformContent">
        <div class="distrPlatformBox">
          <div
            class="distrPlatformBoxItem"
            v-for="(item, index) in reservationList"
            :key="index"
          >
            <!-- <div class="serialNum">{{ index + 1 }}</div> -->
            <div class="itemContent">
              <div>司机：{{ item.driverName }}</div>
              <div>车牌号：{{ item.carNumber }}</div>
              <div>送货单数：{{ item.sendOrder }}</div>
              <div>送货件数：{{ item.sendCount }}</div>
              <div>货物类型：{{ item.goodsType | goodsTypes(that) }}</div>
              <div>过号次数：{{ item.outNum }}</div>
              <div>签到时间：{{ item.signDate }}</div>
              <div>过号时间：{{ item.outDate }}</div>
              <div>预约时间段：{{ item.startSlot }}~{{ item.endSlot }}</div>
              <div>
                未履约次数：<span class="execItem">{{ item.execNum }}</span>
              </div>
            </div>
            <div class="checkBtn">
              <el-button
                type="success"
                icon="el-icon-mic"
                round
                @click="handlecallDriver(item.id)"
                >呼叫</el-button
              >
              <el-button
                type="warning"
                icon="el-icon-close-notification"
                round
                @click="handleoutOrder(item.id)"
                >过号</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-edit"
                round
                @click="handleCheck(item.carNumber)"
                >待审核</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-unlock"
                round
                @click="handleHangup(item)"
                >挂起</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div class="distrPlatformContent">
        <!-- <div>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-form
                :model="queryParamsAlloca"
                ref="queryFormAlloca"
                size="small"
                :inline="true"
                label-width="68px"
                class="platform"
              >
                <el-form-item label="司机:" prop="driverName">
                  <el-input
                    v-model="queryParamsAlloca.driverName"
                    placeholder="请输入司机名称"
                    clearable
                    @keyup.enter.native="handleAlloca"
                  />
                </el-form-item>
                <el-form-item label="车牌号:" prop="carNumber">
                  <el-input
                    v-model="queryParamsAlloca.carNumber"
                    placeholder="请输入车牌号"
                    clearable
                    @keyup.enter.native="handleAlloca"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleAlloca"
                    >搜索</el-button
                  >
                  <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetAlloca"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div> -->
        <div class="distrPlatformBox">
          <div
            class="distrPlatformBoxItem1"
            v-for="(item, index) in pendingList"
            :key="index"
            :style="{
              backgroundColor:
                item.colorStatus === 'dsd' ? '#e4e4e446' : '#e4e4e480',
            }"
          >
            <div class="serialNum">{{ index + 1 }}</div>
            <div>司机：{{ item.driverName }}</div>
            <div>车牌号：{{ item.carNumber }}</div>
            <div>预约日期：{{ item.sendDate }}</div>
            <div>送货单数：{{ item.sendOrder }}</div>
            <div>送货件数：{{ item.sendCount }}</div>
            <div>货物类型：{{ item.goodsType | goodsTypes(that) }}</div>
            <div class="checkBtn">
              <el-button
                size="mini"
                type="success"
                icon="el-icon-mic"
                round
                @click="handlecallDriver(item.id)"
                >呼叫</el-button
              >
              <el-button
                size="mini"
                type="primary"
                round
                @click="handleCheck(item.carNumber)"
                >待审核</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="pie">
        <div class="pie-bttom">
          <span><i class="el-icon-stopwatch"></i>已分配月台数据报表</span>
          <el-form
            :model="queryfinshed"
            ref="queryfinshedForm"
            size="small"
            :inline="true"
            label-width="120px"
          >
            <el-form-item label="车牌号:" prop="carNumber">
              <el-input
                v-model="queryfinshed.carNumber"
                placeholder="请输入车牌号"
                clearable
                @keyup.enter.native="handlefinished"
              />
            </el-form-item>
            <el-form-item label="司机:" prop="driverName">
              <el-input
                v-model="queryfinshed.driverName"
                placeholder="请输入司机名称"
                clearable
                @keyup.enter.native="handlefinished"
              />
            </el-form-item>
            <el-form-item label="手机号:" prop="phone">
              <el-input
                v-model="queryfinshed.phone"
                placeholder="请输入手机号"
                clearable
                @keyup.enter.native="handlefinished"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handlefinished"
                >搜索</el-button
              >
              <el-button
                icon="el-icon-refresh"
                size="mini"
                @click="resetfinished"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
          <el-table :data="reservationplatList" height="520">
            <el-table-column label="排队编号" align="center" prop="softNum" />
            <el-table-column label="审单人" align="center" prop="checkPerson" />
            <el-table-column
              label="月台编号"
              align="center"
              prop="reservationNum"
            />
            <el-table-column label="车牌号" align="center" prop="carNumber" />
            <el-table-column
              label="司机姓名"
              align="center"
              prop="driverName"
            />
            <el-table-column label="司机手机号" align="center" prop="phone" />
            <el-table-column label="货物类型" align="center" prop="goodsType">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.goods_type"
                  :value="scope.row.goodsType"
                />
              </template>
            </el-table-column>
            <el-table-column label="送货渠道" align="center" prop="sendChannel">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.send_channel"
                  :value="scope.row.sendChannel"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="送货订单数"
              align="center"
              prop="sendOrder"
            />
            <el-table-column label="送货件数" align="center" prop="sendCount" />
            <el-table-column label="仓库类型" align="center" prop="warehouse">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.warehouse"
                  :value="scope.row.warehouse"
                />
              </template>
            </el-table-column>
            <!-- <el-table-column label="预约时间段" align="center" prop="timeSlot">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.time_slot"
                  :value="scope.row.timeSlot"
                />
              </template>
            </el-table-column> -->
            <el-table-column
              label="预约时间段"
              align="center"
              prop="startSlot,endSlot"
            >
              <template slot-scope="scope">
                {{ scope.row.startSlot }}~{{ scope.row.endSlot }}
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :auto-scroll="false"
            :page.sync="queryfinshed.pageNum"
            :limit.sync="queryfinshed.pageSize"
            @pagination="getplatList"
          />
        </div>
      </div>
    </div>
    <!-- 添加或修改预约管理对话框 -->
    <el-dialog
      title="审核"
      :visible.sync="open"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-table
        v-loading="loading"
        :data="platformList"
        :row-style="rowStyle"
        @row-click="handleRowClick"
        @select="platSelection"
        @select-all="selectAll"
        ref="multipleTable"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <!-- <el-table-column label="主键" align="center" prop="id" /> -->
        <el-table-column label="司机姓名" align="center" prop="driverName" />
        <el-table-column label="车牌号" align="center" prop="carNumber" />
        <el-table-column label="手机号" align="center" prop="phone" />
        <el-table-column
          label="预约时间段"
          align="center"
          prop="startSlot,endSlot"
        >
          <template slot-scope="scope">
            {{ scope.row.startSlot }}~{{ scope.row.endSlot }}
          </template>
        </el-table-column>
        <el-table-column label="送货单数" align="center" prop="sendOrder" />
        <el-table-column label="送货件数" align="center" prop="sendCount" />
        <el-table-column label="是否大件" align="center" prop="isBig">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isBig"
              active-value="Y"
              inactive-value="N"
              @change="handleBigStatus(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <!-- <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleSignin(scope.row)"
              >取消签到</el-button
            > -->
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleAppoint(scope.row)"
              >取消预约</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <!-- <el-button @click="cancel">取 消</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listplatReservation,
  updateReservation,
  updateCheckReservation,
  carList,
  callDriverList,
  outOrderList,
  checkReservationList,
  PendingReservationlist,
  pendingReservation,
  updateIsBigData,
} from "@/api/system/reservation";
import {
  getreservationCount,
  getSelectReservationList,
  getSelectReservationArray,
} from "@/api/login";
import { listPlatform } from "@/api/system/platform";
import Dormuser from "@/components/echartboard/dormuser.vue";
import Housestati from "@/components/echartboard/housestati.vue";
import roseStati from "@/components/echartboard/roseStati.vue";
import totalStati from "@/components/echartboard/totalStati.vue";
export default {
  components: {
    roseStati,
    totalStati,
    Dormuser,
    Housestati,
  },
  name: "Role",
  // config:{
  //   silent:true,
  // },
  dicts: [
    "sys_normal_disable",
    "send_channel",
    "time_slot",
    "work_status",
    "warehouse",
    "enable_status",
    "goods_type",
  ],
  data() {
    return {
      // 标记大件状态
      bigstatus: "",
      // 已分配月台
      tableData: [],
      // 遮罩层
      loading: true,
      // 是否显示弹出层
      open: false,
      // 月台分配列表
      platformList: [],
      // 挂起列表
      pendingList: [],
      pendingListlength: null,
      // 未分配月台
      reservationAllocaList: [],
      reservationList: [],
      // 预约车辆
      dayreservationCount: null,
      // 签到
      qdCount: null,
      // 完成
      finishedCount: null,
      // 取消
      cancalCount: null,
      // 在途
      ztCount: null,
      // 应收件数
      ysCount: null,
      // 实收件数
      ssCount: null,
      // 查询参数
      queryParams: {
        driverName: null,
        carNumber: null,
      },
      // 分配月台查询参数
      queryParamsAlloca: {
        driverName: null,
        carNumber: null,
      },
      // 月台列表查询参数
      Allocaplattotal: 0,

      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 待分配月台id号
      notplatForm: null,
      // 已分配月台id
      platdata: null,
      reservationNum: null,
      // 货物类型
      goodsColumns: [],
      that: this,
      // 已分配月台
      reservationplatList: [],
      queryfinshed: {
        pageNum: 1,
        pageSize: 10,
        carNumber: null,
        driverName: null,
        phone: null,
        reservationStatus: "4",
      },
      // 待审单数量
      examLength: 0,
      // 待分配月台数量
      AllocaLength: 0,
      checkCar: null,
      timer: null,
    };
  },
  created() {
    this.reservationCountlist();
    this.checkReservation();
    this.pendingData();
    // this.handleExam("1");
    this.handleAllocation("3");
    this.getDicts("goods_type").then((response) => {
      // console.log(response.data);
      response.data.forEach((item) => {
        this.goodsColumns.push({
          value: item.dictValue,
          label: item.dictLabel,
        });
      });
    });
    // this.getList();
    this.getplatList();
  },
  mounted() {
    this.startRefresh();
    // this.bigNumlist();
  },
  beforeDestroy() {
    this.stopRefresh();
  },
  filters: {
    // goodsTypes(value) {
    //   if (value == "0") {
    //     return "西药";
    //   } else if (value == "1") {
    //     return "中药饮片";
    //   } else if (value == "2") {
    //     return "冷链";
    //   } else if (value == "2") {
    //     return "器械";
    //   }
    // },
    goodsTypes(value, that) {
      const dict = {};
      that.goodsColumns.forEach((item) => {
        dict[item.value] = item.label;
      });
      return dict[value] || value;
    },
  },
  methods: {
    // 刷新审单列表
    handlechecklist() {
      this.checkReservation();
    },
    // 挂起信息
    pendingData() {
      PendingReservationlist().then((res) => {
        if (res.data.length > 0) {
          this.pendingList = res.data;
          this.pendingListlength = res.data.length;
        } else {
          this.pendingListlength = 0;
          this.pendingList = [];
        }
      });
    },
    // 挂起
    handleHangup(list) {
      pendingReservation({
        id: list.id,
        driverName: list.driverName,
        carNumber: list.carNumber,
        signDate: list.signDate,
        sendOrder: list.sendOrder,
        sendCount: list.sendCount,
        goodsType: list.goodsType,
      }).then((res) => {
        this.checkReservation();
        this.pendingData();
      });
    },
    // 审单获取数据
    checkReservation() {
      checkReservationList().then((res) => {
        if (res.data) {
          this.reservationList = [res.data];
          // let bigId = res.data.id;
          this.examLength = 1;
          // updateIsBigData({ id:bigId }).then((res) => {
          //   console.log(res);
          // });
        } else {
          this.reservationList = [];
        }
      });
    },
    // 标记为大件
    handleBigStatus(row) {
      let text = row.isBig === "Y" ? "标记大件" : "取消标记大件";
      this.$modal
        .confirm(`确认为"${row.carNumber}"${text}吗？`)
        .then(function () {
          return updateIsBigData({ id: row.id });
        })
        .then(() => {
          this.$modal.msgSuccess(text + "成功");
          this.updatecarcheck();
        })
        .catch(function () {
          row.isBig = row.isBig === "Y" ? "N" : "Y";
        });
    },
    // 呼叫
    handlecallDriver(id) {
      callDriverList({ id: id }).then((res) => {
        console.log(res);
      });
    },
    // 过号
    handleoutOrder(id) {
      outOrderList({ id: id }).then((res) => {
        this.$modal.msgSuccess("过号成功");
        this.checkReservation();
      });
    },
    startRefresh() {
      this.timer = setInterval(() => {
        // window.location.reload();
        this.reservationCountlist();
        this.checkReservation();
        this.pendingData();
        this.getplatList();
      }, 60000);
    },
    stopRefresh() {
      clearInterval(this.timer);
    },
    handlefinished() {
      this.getplatList();
    },
    resetfinished() {
      this.resetForm("queryfinshedForm");
      this.handlefinished();
    },
    // 已分配月台
    getplatList() {
      listplatReservation(this.queryfinshed).then((response) => {
        this.reservationplatList = response.rows;
        this.total = response.total;
      });
    },
    // 占用月台禁止选择
    // handleTableSelectStatus(row, index) {
    //   return row.workStatus === "0";
    // },
    resetAllocaplat() {
      this.resetForm("queryAllocaForm");
    },
    platSelection(selection, row) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
      // this.platdata = row.id;
      // this.reservationNum = row.platformCode;
      if (this.ids.length > 1) {
        let del_row = selection.shift();
        this.$refs.multipleTable.toggleRowSelection(del_row, false);
      }
      if (selection.length == 0) {
        this.platdata = null;
        this.reservationNum = null;
        return;
      }
    },
    selectAll() {
      this.$refs.multipleTable.clearSelection();
    },
    // 月台行选择
    handleRowClick(row) {
      this.platdata = row.id;
      // console.log(row.id);
    },
    rowStyle({ row, rowIndex }) {
      if (this.platdata === row.id) {
        return {
          "background-color": "#68ffeb",
          cursor: "pointer",
        };
      }
    },
    // 分配月台确定
    submitForm() {
      if (this.platdata == null) {
        this.$message({
          type: "warning",
          message: "请选择一条数据!",
        });
      } else {
        this.$confirm("是否通过审核?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            updateReservation({
              id: this.platdata,
              reservationStatus: "2",
            }).then((res) => {
              // this.handleExam("1");
              this.checkReservation();
              this.handleAllocation("3");
              this.updatecarcheck();
              this.pendingData();
              this.getplatList();
              this.open = false;
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      }
    },
    // 取消分配月台
    cancel() {
      this.open = false;
    },
    // 审单搜索
    handlePlatform() {
      // this.handleExam("1");
    },
    // 重置审单
    resetPlatform() {
      this.resetForm("queryForm");
      this.handlePlatform();
    },
    // handleExam(number) {
    //   getSelectReservationList({
    //     reservationStatus: number,
    //     ...this.queryParams,
    //   }).then((res) => {
    //     this.reservationList = res.data;
    //     this.examLength = res.data.length;
    //   });
    // },
    // 分配搜索
    handleAlloca() {
      this.handleAllocation("3");
    },
    // 重置分配月台
    resetAlloca() {
      this.resetForm("queryFormAlloca");
      this.handleAlloca();
    },
    handleAllocation(number) {
      getSelectReservationArray({
        reservationStatus: number,
        ...this.queryParamsAlloca,
      }).then((res) => {
        this.reservationAllocaList = res.data;
        this.AllocaLength = res.data.length;
      });
    },
    // handleAllc(id) {
    //   this.open = true;
    //   this.notplatForm = id;
    //   this.platdata=null;
    //   console.log(this.notplatForm);
    // },
    handleCheck(carNumber) {
      this.open = true;
      this.checkCar = carNumber;
      carList({ carNumber: carNumber }).then((response) => {
        this.platformList = response.data;
        this.Allocaplattotal = response.total;
        this.loading = false;
      });
      // this.$confirm("是否通过审核?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      //     updateReservation({ id: id, reservationStatus: "2" }).then((res) => {
      //       this.handleExam("1");
      //       this.handleAllocation("3");
      //       this.getplatList();
      //     });
      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: "info",
      //       message: "已取消",
      //     });
      //   });
    },

    // 更新车辆审核列表
    updatecarcheck() {
      carList({ carNumber: this.checkCar }).then((response) => {
        this.platformList = response.data;
        this.Allocaplattotal = response.total;
        this.loading = false;
      });
    },
    reservationCountlist() {
      getreservationCount().then((res) => {
        this.dayreservationCount = res.data.yy;
        this.qdCount = res.data.qd;
        this.finishedCount = res.data.wc;
        this.cancalCount = res.data.qx;
        this.ysCount = res.data.ys;
        this.ssCount = res.data.ss;
        this.ztCount = Number(
          this.dayreservationCount - this.qdCount - this.cancalCount
        );
      });
    },
    // 住宿待审批
    handledsp() {
      this.$router.push({
        path: "/system/reservation",
        query: {
          reservationStatus: "0",
          sendDate: new Date().toISOString().split("T")[0],
        },
      });
    },
    // 取消签到
    // handleSignin(row) {
    //   this.$confirm("请确认是否取消签到?", "取消签到", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       updateReservation({ id: row.id, reservationStatus: "0" }).then(
    //         (res) => {
    //           this.updatecarcheck();
    //           this.checkReservation();
    //           this.open = false;
    //         }
    //       );
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消",
    //       });
    //     });
    // },
    // 取消预约
    handleAppoint(row) {
      updateCheckReservation({ id: row.id, reservationStatus: "6" }).then(
        (res) => {
          this.updatecarcheck();
          this.checkReservation();
          this.open = false;
        }
      );
    },
    handleDistribution() {
      this.$router.push({
        path: "/system/reservation",
        query: {
          reservationStatus: "5",
          sendDate: new Date().toISOString().split("T")[0],
        },
      });
    },
    handleCancel() {
      this.$router.push({
        path: "/system/reservation",
        query: {
          reservationStatus: "6",
          sendDate: new Date().toISOString().split("T")[0],
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/dorm.scss";
::v-deep .el-dialog__footer {
  text-align: center !important;
  // top: 8px;
  // right: 300px;
  // position: absolute;
}
.el-table__body tr.current-row > td {
  background-color: #68ffeb !important;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #68ffeb !important;
  /* color: #fff; */
}
::v-deep .el-button {
  z-index: 1;
}
</style>